<%@ page language="java" contentType="text/html; charset=utf-8"
	pageEncoding="utf-8"%>
<%
    String userid = request.getSession().getAttribute("user_id") == null
					? ""
					: request.getSession().getAttribute("user_id").toString();
%>
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<link rel="stylesheet" type="text/css"
	href="../../bootstrap-3.3.7/dist/css/bootstrap.min.css" />
<link rel="stylesheet" type="text/css"
	href="../../bootstrap-3.3.7/dist/css/bootstrap-theme.min.css" />
<link rel="stylesheet" type="text/css" href="../../css/index.css" />
<link rel="stylesheet" type="text/css" href="../../css/background.css" />

<script type="text/javascript"
	src="../../bootstrap-3.3.7/dist/js/jquery.min.js"></script>
<script type="text/javascript"
	src="../../bootstrap-3.3.7/dist/js/bootstrap.js"></script>
<script type="text/javascript" src="../../js/bootstrap-paginator.js"></script>
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<link
	href="../../bootstrap-3.3.7/docs/assets/css/ie10-viewport-bug-workaround.css"
	rel="stylesheet">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
</head>
<body>
	<div class="row" style="margin-top: 20px">
		<div class="col-md-2" style="margin-top: 10px;">
			<select class="combobox" id="status"
				style="height: 30px; width: 80%; float: right">
				<option value="">全部</option>
				<option value="未回复">未回复</option>
				<option value="回复">已回复</option>
			</select>
		</div>
		
		<div class="col-md-8">
			<div class="col-md-3" style="margin-top: 12px">
				<span class="myfont" style="float: right">问题描述:</span>
			</div>
			<div class="col-md-8" style="margin-top: 5px">
				<div class="input-group">
				<input type="text" id="content" class="form-control"
					placeholder="请输入内容关键字..."> <span class="input-group-btn">
					<button class=" btn btn-warning" type="button" onclick="search()">
						<span class="myfont">检索</span>
					</button>
				</span>
			</div>
			</div>
			
		</div>
		<div class="col-md-2">
			<div class="input-group" style="margin-top: 10px">
				<a href="../specialist/getSpecialistview"><span
					style="font-size: 28;" class="text-primary">我要提问</span></a>
			</div>
		</div>
	</div>
	<div class="row" style="height: 780px; margin-top: 10px" id="tip">
		<div class="myline"></div>
		<div class="col-md-12" id="tip" style="min-height: 700px;">

			<ul style="padding-left: 30px;" id="info">

			</ul>
		</div>
		<div class="col-md-12">
			<div class="col-md-2"></div>
			<div class="col-md-7">
				<ul id="paginator" style="padding-left: 40px"></ul>
			</div>
		</div>
	</div>
</body>
<script type="text/javascript">
var userid = '<%=userid%>';
	var totalpage;
	var currentpage;
	var rows = 4;
	$(function() {
		calculatetotalpage();
		currentpage = 1;
		paginator(totalpage, currentpage);
		initPage(1);
	});
	function search() {
		calculatetotalpage();
		currentpage = 1;
		paginator(totalpage, currentpage);
		initPage(1);
	}

	//计算出totalpage
	function calculatetotalpage() {
		$
				.ajax({
					url : '../message/getMessageCaCount',
					type : 'post',
					async : false,
					data : {
						user_id : userid,
						message_abstract : $('#content').val(),
						message_parentid : 'null'
					},
					success : function(result) {
						if (result % rows == 0) {
							totalpage = result / rows;
						}
						if (result % rows != 0) {
							totalpage = result / rows + 1;
						}
						if (totalpage == 0) {
							$("#info").html("");
							$("#paginator").html("");
							$("#tip")
									.append(
											'<div style="text-align: center;"><span>抱歉，没有找到相关信息</span></div>');
						}
					}
				});
	}
	function initPage(page) {
		$
				.ajax({
					url : '../message/getMessageCatalogue',
					type : 'get',
					async : false,
					data : {
						page : (page - 1) * rows,
						rows : rows,
						message_abstract : $('#content').val(),
						message_type : 'limit',
						user_id : userid,
						message_parentid : 'null',
						message_reply : $('#status').val()
					},
					success : function(result) {
						var data = eval(result);
						$("#info").html("");
						//循环
						var li = "";
						for (var i = 0; i < data.length; i++) {
							li += '<li style="margin-top: 5px;">';
							li += '<div class="row">';
							li += '<div class="col-md-2">';
							li += '<div style="float: right">';
							li += '<img class="img-thumbnail" src="../../image/user/'+data[i].picture_tourl+'" style="height:120px;width:90px;"></br>';
							li += '<a href="../specialist/getZJDetail?zjid='
									+ data[i].touser_id
									+ '"><span class="text-primary" style="padding-left: 40px">'
									+ data[i].touser_name + '</span></a>';
							li += '</div>';
							li += '</div>';
							li += '<div class="col-md-9" style="padding-top: 5px">';
							li += '<div class="row">';
							li += '<div class="col-md-3">';
							li += '<p>';
							li += '<span class="text-muted" style="font-size: 28">主题:&nbsp;&nbsp;</span>';
							li += '<span class="myfont">'
									+ data[i].message_abstract + '</span>';
							li += '</p>';
							li += '</div>';
							li += '<div class="col-md-4"></div>';
							li += '<div class="col-md-5">';
							li += '<div style="float: left">';
							li += '<p>';
							li += '<span class="text-muted" style="font-size: 28">留言时间:&nbsp;&nbsp;</span>';
							li += '<span class="myfont">'
									+ data[i].message_time + '</span>';
							li += '</p>';
							li += '</div>';
							li += '</div>';
							li += '</div>';
							li += '<div class="row">';
							li += '<div class="col-md-12">';
							li += '<a onclick="check(&quot;'
									+ data[i].message_id
									+ '&quot;,&quot;'
									+ data[i].user_id
									+ '&quot;,&quot;'
									+ data[i].touser_id
									+ '&quot;)" style="padding-top: 10px"><span class="text-primary">'
									+ data[i].message_content + '</span></a>';
							li += '</div>';
							li += '</div>';

							li += '<div style="float: right;"><a onclick="deleteMessage(&quot;'
									+ data[i].message_id
									+ '&quot;)"><span>删除</span></a></div>';

							li += '</div>';
							li += '</div>';
							li += '</li>';
						}
						//循环
						$("#info").append(li);
					}
				});
	}

	function paginator(value, page) {
		var element = $('#paginator');
		var options = {
			bootstrapMajorVersion : 3, //对应的bootstrap版本
			currentPage : page, //当前页数，这里是用的EL表达式，获取从后台传过来的值
			numberOfPages : rows, //每页页数
			totalPages : value, //总页数，这里是用的EL表达式，获取从后台传过来的值
			shouldShowPage : true,//是否显示该按钮
			itemTexts : function(type, page, current) {//设置显示的样式，默认是箭头
				switch (type) {
				case "first":
					return "首页";
				case "prev":
					return "上一页";
				case "next":
					return "下一页";
				case "last":
					return "末页";
				case "page":
					return page;
				}
			},
			onPageClicked : function(event, originalEvent, type, page) {
				currentpage = page;
				initPage(page);
			}
		};
		element.bootstrapPaginator(options);
	}

	function deleteMessage(id) {
		$.ajax({
			url : '../message/deleteMessage',
			type : 'post',
			async : false,
			data : {
				id : id
			},
			success : function(result) {
				if (result != 0) {
					calculatetotalpage();
					initPage(currentpage);
					calculatetotalpage();
					if (currentpage > totalpage) {
						currentpage = currentpage - 1;
						paginator(totalpage, currentpage);
						initPage(currentpage);
					} else {
						paginator(totalpage, currentpage);
						initPage(currentpage);
					}
				}
			}
		});
	}
	function check(message_id, user_id, touser_id) {
		$("#refresh").load(
				"../message/getMessageCheckview?message_id=" + message_id
						+ "&user_id=" + user_id + "&touser_id=" + touser_id);
	}
</script>
</html>